import React from "react";
import Herder from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends React.Component {
  state = {
    todos: [
      { id: 1, name: "吃饭", done: true },
      { id: 2, name: "睡觉", done: true },
      { id: 3, name: "打代码", done: false },
    ],
  };

  addTodo =(todoObj)=>{
      const {todos} = this.state
      const newTodo = [todoObj,...todos]
      this.setState({todos:newTodo})
  }

  updateTodo = (id,done) =>{
    const {todos} = this.state
    const newTodes= todos.map((todoObj) => {
      if(todoObj.id === id) return {...todoObj,done}
      else return todoObj
    })
    this.setState({todos:newTodes})
  }

  deleteTodo = id => {
    const {todos} = this.state
    const newTodos=todos.filter((todoObj)=>{
      return todoObj.id !==id
    })
    this.setState({todos:newTodos})
  }

  checkAllTodo =(done) => {
    const {todos} =this.state
    const newTodo = todos.map((todoObj)=>{
      return {...todoObj,done}
    })
    this.setState({todos:newTodo})
  }

  cleraAllDone = () => {
    const {todos} =this.state
    const newTodo = todos.filter((todoObj) =>{
      return !todoObj.done
    })
    this.setState({todos:newTodo})
  }

  render() {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Herder addTodo={this.addTodo}/>
          <List todos={this.state.todos} updateTodo={this.updateTodo}deleteTodo={this.deleteTodo}/>
          <Footer todos={this.state.todos}  checkAllTodo={this.checkAllTodo} cleraAllDone={this.cleraAllDone}/>
        </div>
      </div>
    );
  }
}
